<template>
  <div>
     <el-input placeholder="图片验证码" v-model="imagecode">
    <template slot="prepend"> 
      <el-image
      style="width: 200px; height: 40px"
      :src="imageurl"
      @click="getuuid"></el-image>
      </template>
  </el-input>
  <el-input placeholder="手机号" v-model="mobile">
    <template slot="prepend">  <el-button @click="getsms" :disabled='flag'>{{msg}}</el-button></template>
  </el-input>
    <el-input placeholder="短信验证码" v-model="sms" clearable> </el-input>
  <el-button type="danger" plain @click="login">登录</el-button>
  <el-button @click="wb">微博</el-button>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'
export default {
  data(){
    return{
      mobile:'',
      imagecode:'',//图片验证码
      sms:'',//短信验证码
      uuids : '',
      imageurl:'',//输入图片验证码
      time:6,//时间
      msg:'发送短信验证码',
      flag:false

    }
  },
  methods:{
    getuuid (){
      this.uuids = uuid()
      this.imageurl = "http://localhost:8000/getImageCode?uuid="+this.uuids
    },
    getsms(){

      this.axios.post('sendsms',{mobile:this.mobile,uuid:this.uuids,imagecode:this.imagecode})
      .then(res=>{
          alert(res.data.msg)
          var t= setInterval(()=>{
                  if(res.data.code==200){
                    if(this.time == 0){
                    clearInterval(t)
                    this.time = 6
                    this.msg ='发送短信验证码'
                    this.flag = false
                }else{
                    this.time--
                    this.msg = this.time + '秒'
                    this.flag = true

                }
                  }
                
                },1000)
      })
    },
    login(){
      this.axios.post('login',{mobile:this.mobile,sms:this.sms})
      .then(res=>{
        alert(res.data.msg)
      })
    },
    wb(){
      this.axios.get('wblogin')
      .then(res=>{
        var url = res.data.url
        window.location.href = url
      })
    }

  },
  mounted(){
    this.getuuid()

  }
};
</script>

<style>
</style>